<style lang="scss" scoped>
	.xh-header {
		position: relative;
		width: 750rpx;
		height: 200rpx;
		border-bottom: 1rpx solid #ccc;

		.xh-h1 {
			text-align: center;
			padding-top: 110rpx;
		}

		.fanhui {
			position: absolute;
			top: 110rpx;
			left: 20rpx;
			font-size: 40rpx;
			font-weight: 600;
		}


	}

	.deta-imgs {
		width: 750rpx;
		height: 450rpx;
		background: pink;

		image {
			width: 750rpx;
			height: 450rpx;
		}
	}

	.deta-from {
		padding: 10rpx;
		box-sizing: border-box;

		.deta-title {
			width: 730rpx;
			height: 100rpx;
			border-bottom: 2rpx solid #cecece;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				padding-left: 10rpx;
				font-weight: 600;
			}

			.right {
				padding: 0rpx 10rpx;
				text-align: center;
				font-size: 25rpx;
			}
		}

		.deta-form-item {
			display: flex;
			width: 730rpx;
			height: 130rpx;
			margin: 20rpx 0rpx;
			justify-content: start;
			align-items: center;

			.left {
				flex-shrink: 0;
				font-weight: 600;
				padding: 0rpx 50rpx 0rpx 10rpx;
			}

			.right {
				display: flex;
				flex-wrap: wrap;
				color: #7e7e7e;
				.radios {
					margin: 10rpx 10rpx;
					border-radius: 10rpx;
				}
			}

		}
	}
	.xiangqing {
		margin-top: 20rpx;
		width: 750rpx;
		padding-bottom: 200rpx;
		.xiantitle {
			font-weight: 600;
			padding: 20rpx;
		}
		.xiantext {
		
			padding: 10rpx;
			.one {
					text-indent: 1.5em;
			}
		}
	}
	.cartfixed {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 750rpx;
		height: 200rpx;
		box-sizing: border-box;
		background: #fff;
		.fixhd {
			width: 750rpx;
			height: 60rpx;
			// background: pink;
			padding: 10rpx;
			line-height: 35rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.fleft {
				width: 50%;
				height: 50rpx;
				margin-top: 5rpx;
				font-size: 40rpx;
				text {
					font-weight: 600;
				}
				.andmis {
					font-size: 27rpx;
				}
			}
			.fright {
				display: flex;
				height: 50rpx;
				margin-right: 50rpx;
				.count {
					margin: 0rpx 10rpx;
					font-size: 34rpx;
				}
				.btn {
					color: #e60012;
					font-size: 50rpx;
					padding: 0rpx 5rpx;
				}
			}
		}
		.fixbd {
			
			height: 100rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			button {
				display: block;
				width: 45%;
				height: 80rpx;
				margin: 5rpx;
			}
		}
	}
</style>
<template>
	<view class="xh-header">
		<view class="xh-h1">雪王大圣代</view>
		<i @click="resgo" class="iconfont icon-fanhui fanhui"></i>
	</view>
	<view class="deta-imgs">
		<image :src="goodslist.imgs"></image>
	</view>
	<view class="deta-from">
		<view class="deta-title">
			<view class="left">{{goodslist.moreName}}</view>
			<view class="right">
				<i class="iconfont icon-shoucang"></i>
				收藏口味
			</view>
		</view>
		<view class="deta-form-item">
			<view class="left">温度</view>
			<view class="right">
				<uni-tag class="radios" :text="item.label" type="error" :inverted="inverted!==item.value" @click="wendu(item)" v-for="item in icelist"></uni-tag>
				<!-- <view class="radios" @click="wendu(item)" v-for="item in icelist"></view> -->
			</view>
		</view>
		<view class="deta-form-item">
			<view class="left">糖度</view>
			<view class="right">
				<uni-tag class="radios" :text="item.label" type="error" :inverted="tangted!==item.value" @click="tang(item)" v-for="item in sugar"></uni-tag>
			</view>
		</view>
		<view class="deta-form-item">
			<view class="left">加料</view>
			<view class="right">
				<uni-tag class="radios" :text="item.label" type="error" :inverted="liaoted!==item.value" @click="liao(item)" v-for="item in material"></uni-tag>
			</view>
		</view>
	</view>
	<view class="xiangqing">
		<view class="xiantitle">商品详情</view>
		<view class="xiantext">
			<view class="one">芋泥真厚 赞不绝囗主辅料:芋圆、冷冻紫薯芋泥、浓缩奶茶(红茶、奶茶粉)</view>
			<view>【杯型容量:中杯:杯容量505mL】【杯型容量】即杯容积，非实际含量。</view>
			<view>为避免过满无法封杯或撒漏，可能存在不完全满杯情况，克重为预估出餐量参考数据，
			实际含量请以门店出餐为准。</view>
			注:杯型容量数据基于相关国家标准存在合理偏差,
		</view>
	</view>
	<view class="cartfixed">
		<view class="fixhd">
		<view class="fleft">
			<view class="fixedPrice">￥<text>{{goodslist.morePirce * count}}</text></view>
			<view class="andmis">{{resgoods1}}/{{resgoods2}}/{{resgoods3}}</view>
		</view>
		<div class="fright">
			<view class="btn iconfont icon-jian" @click="sub(-1)"></view>
			<view class="count">{{count}}</view>
			<view class="btn iconfont icon-jia" @click="sub(1)"></view>
		</div>
		</view>
		<view class="fixbd">
			<button @click="getbuy">立即购买</button>
			<button  @click="getcart" type="warn">加入购物车</button>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		onMounted,
		
	} from 'vue'
	import { getSelect,getsugar,getmaterial,getDetaList, buyone } from '../../api/deta'; 
	const goodslist = ref({}) //获取数据
	
	const icelist = ref([]) //获取数据 冰
	const sugar  = ref([]) //糖
	const material =ref([]) //料
	
	// 获取的
	const inverted=ref(0)
	const tangted = ref(0)
	const liaoted = ref(0)
	
	//商品数量
	const count = ref(1)
	
	// 渲染出商品
	const resgoods1 = ref('多冰')
	const resgoods2 = ref('正常糖')
	const resgoods3 = ref('珍珠')
	let goods = []
	// 获取id



	let v1 = ''
	const render = async () => {
		v1 = uni.getStorageSync('xue') || '';
		console.log(v1)
	await 
		
	await getDetaList(v1).then((res)=>{
			goodslist.value = res.data
		})
		// 冰
	await	getSelect().then(res=>{
			icelist.value= res.data
		})
		// 糖
	await	getsugar().then(res=>{
			sugar.value= res.data
		})
		// 料
	await	getmaterial().then(res=>{
			material.value= res.data
		})
	}
	// 返回方法
	const resgo = ()=>{
		 uni.navigateBack();
	}
	
	//选中ice 
	const wendu=(row)=>{
		console.log(row)
		inverted.value=row.value
		resgoods1.value = row.label
	}
	// 糖
	const tang =(row)=>{
		console.log(row)
		tangted.value=row.value
		resgoods2.value= row.label
	}
	// 料
	const liao =(row)=>{
		console.log(row)
		liaoted.value=row.value
	resgoods3.value= row.label
	
	}
	
	//小料选项
	const resvs = computed(()=>{
		let str  = ''
	for(let i =0;i<resgoods.value.length;i++){
		str+=resgoods.value[i]
	}
	return str
	})
	
	const sub=(val)=>{
		if(count.value + val < 1) return 
		count.value+=val
	}
	
	
	// 去购买
	const getbuy = async()=>{
		
		goods = [ {
			price:parseInt(goodslist.value.morePirce),
			moreName:  goodslist.value.moreName,
			imgs:goodslist.value.imgs,
			counts:count.value,
			list:`${resgoods1.value}/${resgoods2.value}/${resgoods3.value}`
		}]
		uni.navigateTo({
			url:'/pages/publish/publish'
		})
		// let price = parseInt(goodslist.value.morePirce)
		// let moreName = goodslist.value.moreName
		// let imgs = goodslist.value.imgs
		// let counts = count.value
		// let list = `${resgoods1.value}/${resgoods2.value}/${resgoods3.value}`
		const res = await buyone(goods)
		// console.log(res)
		
	}
	// 去购物车
	const getcart = async()=>{
		let zhi = uni.getStorageSync('xw_goods')
		if(zhi){
			// console.log(zhi,'是什么')
		 	goods = JSON.parse(uni.getStorageSync('xw_goods'))
			goods.push({
					price:parseInt(goodslist.value.morePirce),
					moreName:  goodslist.value.moreName,
					imgs:goodslist.value.imgs,
					counts:count.value,
					list:`${resgoods1.value}/${resgoods2.value}/${resgoods3.value}`
				})
				uni.setStorageSync('xw_goods', JSON.stringify(goods))
				// console.log(uni.getStorageSync('xw_goods'),'追加')
		} else {
			console.log('新增')
			goods.push( {
					price:parseInt(goodslist.value.morePirce),
					moreName:  goodslist.value.moreName,
					imgs:goodslist.value.imgs,
					counts:count.value,
					list:`${resgoods1.value}/${resgoods2.value}/${resgoods3.value}`
				})
				uni.setStorageSync('xw_goods', JSON.stringify(goods))
				console.log(uni.getStorageSync('xw_goods'),'新增')
		}
		// console.log(uni.getStorageSync('xw_goods'))
	 // uni.setStorageSync('xw_goods', JSON.stringify(goods))
		uni.switchTab({
			url:'/pages/order/order'
		})
		const res = await buyone(goods)
	}


	
	
	
	
	
	
	
	
	
	
	
	render()
	
	

</script>